import React, { useMemo } from 'react';
import { List, Avatar, Icon } from 'choerodon-ui';
import { Size } from 'choerodon-ui/lib/_util/enum';
import { useListVertical } from './hooks';
import { Item } from './typing.d';

interface IconTextProps {
  type: string,
  text: string
}

const IconText: React.FC<IconTextProps> = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

const ListGrid: React.FC = () => {
  const listData = useListVertical();
  const pagination = useMemo(() => ({
    pageSize: 10,
    current: 1,
    total: listData?.length,
    onChange: () => { },
  }), listData);

  return (
    <List
      itemLayout="vertical"
      size={Size.large}
      pagination={pagination}
      dataSource={listData}
      renderItem={(item: Item) => (
        <List.Item
          key={item.title}
          actions={[
            <IconText key="star-o" type="star-o" text="156" />,
            <IconText key="like-o" type="like-o" text="156" />,
            <IconText key="message" type="message" text="2" />,
          ]}
          extra={
            <img
              width={272}
              alt="logo"
              src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
            />
          }
        >
          <List.Item.Meta
            avatar={<Avatar src={item.avatar} />}
            title={<a href={item.href}>{item.title}</a>}
            description={item.description}
          />
          {item.content}
        </List.Item>
      )}
    />
  );
};

export default ListGrid;